import React from "react"
import { NavLink } from 'react-router-dom'
//控制路由跳转，后期改为browser
import createHashHistory from 'history/createHashHistory';
const history = createHashHistory();
//引入antd组件
import { Form, Icon, Input, Button, Checkbox ,message } from 'antd';
import { Avatar } from "antd"

// 引入css文件
import "../../css/loginStyle.css"

//引入封装完成的fetch方法
import {get,post,formPost} from "../common/request";
const FormItem = Form.Item;

class Login extends React.Component {

	constructor(props) {
		super(props);
	}

	login(e) {
		e.preventDefault();
		//向前端发起登录请求，登录成功之后获得token验证码，再之后的所有请求都需要将token加入到请求头进行校验
		const form = this.props.form;
		var data = {
			username : form.getFieldValue('username'),
			password : form.getFieldValue('password')
		};
		var login = formPost("/api/login/",data).then((json)=>{
			if(json.code == 200){
				//登录成功之后，设置user相关信息到本地，进行页面跳转
				localStorage.setItem("fleaUsername",data.username);
				localStorage.setItem("fleaPassword",data.password);
				localStorage.setItem("fleaToken",json.token);
				history.push("/mobile");
			}
			else{
				message.error(json.message);
			}
		});
	}

	autoLogin(){
		//如果felaUsername 和password存在，自动进行登录
		if(localStorage.getItem("fleaPassword") !== null && localStorage.getItem("fleaUsername") !== null){
			//fetch访问登录接口，回调重置token验证
			var data = {
				username : localStorage.getItem("fleaUsername"),
				password : localStorage.getItem("fleaPassword")
			}
			var login = formPost("/api/login/",data).then((json)=>{
				console.log(json);
				if(json.code == 200){
					//登录成功之后，设置user相关信息到本地，进行页面跳转
					localStorage.setItem("fleaToken",json.token);
					history.push("/mobile");
				}
				else{
					message.error("自动登录失败，请重新输入用户名密码");
				}
			});
		}
		else {
		}
	}

	componentDidMount(){
		//登录组件加载完成之后进行自动登录
		this.autoLogin();
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div className="login">
				<div className="userHead">
					<Avatar size="large" icon="user" />
				</div>
				<div className="helloWords">
					Welcome to Market!
				</div>
				<div>
					<div className="loginForm">
						<Form onSubmit={this.login.bind(this)} className="login-form">
							<FormItem  className="loginOp">
								{getFieldDecorator('username', {
									rules: [{ required: true, message: '请输入你的学号！' }],
								})(
									<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="学号" />
								)}
							</FormItem>
							<FormItem  className="loginOp">
								{getFieldDecorator('password', {
									rules: [{ required: true, message: '请输入你的密码！' }],
								})(
									<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
								)}
							</FormItem>
							<FormItem>
								<Button type="primary" htmlType="submit" className="login-form-button login-self-btn">
									登 陆
								</Button>
							</FormItem>
						</Form>
					</div>
				</div>
			</div>
		)
	}
}

export default Login = Form.create({})(Login);
